<template>
  <div class="right-box">
    <div class="box1">
      <div class="title-box">
        <commonItemTitleV2 title="事前预警"></commonItemTitleV2>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1" :style="{ flex: box1Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box1Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box1Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box1Flex[3] }">数量</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list1"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <commonWarnList
            :flex-list="box1Flex"
            :table-data="list1"
            :table-type="1"
          ></commonWarnList>
        </vue3ScrollSeamless>
        <commonWarnList
          :flex-list="box1Flex"
          :table-data="list1"
            :table-type="1"
          v-else
        ></commonWarnList>
      </div>
    </div>
    <div class="box2">
      <div class="title-box">
        <commonItemTitleV2 title="事中预警"></commonItemTitleV2>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1" :style="{ flex: box2Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box2Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box2Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box2Flex[3] }">业务单号</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list2"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <commonWarnList
            :flex-list="box2Flex"
            :table-data="list2"
            :table-type="2"
          ></commonWarnList>
        </vue3ScrollSeamless>
        <commonWarnList
          :flex-list="box2Flex"
          :table-data="list2"
            :table-type="2"
          v-else
        ></commonWarnList>
      </div>
    </div>
    <div class="box3">
      <div class="title-box">
        <commonItemTitleV2 title="事后预警"></commonItemTitleV2>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1" :style="{ flex: box2Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box2Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box2Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box2Flex[3] }">业务单号</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list2"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <commonWarnList
            :flex-list="box2Flex"
            :table-data="list2"
            :table-type="2"
          ></commonWarnList>
        </vue3ScrollSeamless>
        <commonWarnList
          :flex-list="box2Flex"
          :table-data="list3"
            :table-type="2"
          v-else
        ></commonWarnList>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import commonItemTitleV2 from "../../../components/commonItemTitleV2.vue";
import commonWarnList from "../../../components/commonWarnList.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import preWarningJson from '../../../mock/preWarning.json'
import duringWarningJson from '../../../mock/duringWarning.json'
import afterWarningJson from '../../../mock/afterWarning.json'


const box1Flex = ref([4, 2, 2, 2]);
const box2Flex = ref([3, 3, 2, 6]);

const list1 = ref(preWarningJson.data);
const list2 = ref(duringWarningJson.data);
const list3 = ref(afterWarningJson.data);

const listScrollOptions = ref({
  singleHeight: 0,
  // setp: 1,
  // switchDelay: 400,
  // waitTime: 1000
});
const renderScrollFun = () => {
  let ele = document.getElementsByClassName("listItem")[0] as HTMLElement;
  let scroll1 = ele.offsetHeight;
  listScrollOptions.value.singleHeight = scroll1 ? scroll1 : 0;
};
const resizeRender = () => {
  listScrollOptions.value.singleHeight = 0;
  setTimeout(() => {
    renderScrollFun();
  }, 1000);
};
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      renderScrollFun();
    }, 1000);
  });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.right-box {
  position: relative;
}
.box1,
.box2,
.box3 {
  padding: 15px 16px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
  border-radius: 8px 8px 8px 8px;
//   .title-box {
//   }
  .content-box {
    // width: 402px;
    position: relative;
    margin-top: 13px;
    color: #fff;
    .head-box {
      display: flex;
      align-items: center;
      height: 36px;
      background: #ecf7ff;
      font-weight: 400;
      font-size: 13px;
      color: #144783;
      .item1 {
        padding: 0 12px;
        box-sizing: border-box;
      }
    }
  }
}
.box1 {
  height: 246px;
  .content-box {
    height: 185px;
    // overflow-y: scroll;
    overflow: hidden;
  }
  .scroll-wrap {
    height: 153px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
.box2,
.box3 {
  .scroll-wrap {
    height: 225px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
.box2 {
  height: 322px;
  margin: 16px 0;
  .content-box {
    height: 262px;
    // overflow-y: scroll;
    overflow: hidden;
  }
}
.box3 {
  height: 320px;
  .content-box {
    height: 260px;
    // overflow-y: scroll;
    overflow: hidden;
  }
}
</style>
